<template>
  <div class="baseinfo-container">
    <el-form ref="userInfoForm" :model="userInfoForm">
      <el-form-item prop="userId" label="用户ID">
        <el-input v-model="userInfoForm.userId" size="medium" disabled name="userId" type="text" />
      </el-form-item>

      <el-form-item prop="loginAccount" label="用户名">
        <el-input v-model="userInfoForm.loginAccount" size="medium" disabled name="loginAccount" type="text" />
      </el-form-item>

      <el-form-item prop="staffNum" label="工号">
        <el-input v-model="userInfoForm.staffNum" size="medium" disabled name="staffNum" type="text" />
      </el-form-item>

      <el-form-item prop="nickname" label="昵称">
        <el-input v-model="userInfoForm.nickname" size="medium" name="nickname" type="text" />
      </el-form-item>

      <el-form-item prop="gender" label="性别">
        <el-select v-model="userInfoForm.gender" placeholder="请选择性别" style="width: 100%">
          <el-option v-for="item in resourceOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item prop="birthday" label="生日">
        <el-date-picker v-model="userInfoForm.birthday" size="medium" placeholder="选择生日" style="width: 100%" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSave">更新信息</el-button>
      </el-form-item>
    </el-form>

    <div class="avatar-wrap">
      <Upload />
      <span class="tip">点击头像进行更换</span>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import { validateNickName } from '@/utils/validate.js'
import { ucApi } from '@/api/api'
import { parseTime } from '@/utils'

// 性别
const resourceOptions = [
  { label: '未知', value: 0 },
  { label: '男', value: 1 },
  { label: '女', value: 2 },
  { label: '保密', value: 3 }
]

export default {
  name: 'BaseInfo',
  components: {
    Upload: () => import('./upload')
  },
  data() {
    return {
      resourceOptions,
      userInfoForm: {
        userId: '',
        loginAccount: '',
        staffNum: '',
        nickname: '',
        gender: '',
        birthday: ''
      },
      userInfoRules: {
        // nickname: [{ required: true, trigger: 'blur', validator: validateNickName }]
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created() {
    //TODO: 无昵称、生日、性别
    this.userInfoForm.userId = this.userInfo.userId
    this.userInfoForm.loginAccount = this.userInfo.loginAccount
    this.userInfoForm.staffNum = this.userInfo.staffNum
    this.userInfoForm.nickname = this.userInfo.nickname
    this.userInfoForm.gender = this.userInfo.gender
    this.userInfoForm.birthday = this.userInfo.birthday
  },

  methods: {
    async handleSave() {
      // this.$refs.userInfoForm.validate(async (valid) => {
      //   if (valid) {

      //   }
      // })
      try {
        let { nickname, gender, birthday } = this.userInfoForm
        // birthday = this.$moment(birthday).format('YYYY-MM-DD')
        birthday = parseTime(birthday, '{y}-{m}-{d}')
        await this.$request(ucApi.updateUserInfo, { nickname, gender, birthday })
        this.$message({
          message: '个人信息更新成功',
          type: 'success'
        })
        this.$store.dispatch('user/getInfo')
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.baseinfo-container {
  display: flex;
  padding: 0 16px;

  .el-form {
    width: 322px;
  }
  .avatar-wrap {
    padding: 16px 0 0 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .upload {
    width: 214px;
    height: 214px;
  }

  .tip {
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
    margin-top: 20px;
  }
}
</style>
